<template>
  <a-modal :visible="visible" :title="title" destroyOnClose centered @ok="submitForm" :ok-button-props="{ props:{disabled:!noBalance}}" @cancel="cancel" :confirmLoading="submitLoading" okText="确认付款">
    <div>
      <div>
        <span class="title">收款账号：</span>
        <!-- <span>652348854522222222222</span> -->
        <span>{{receiver.virtualCardNo}}</span>
      </div>
      <div>
        <span class="title">收款账户名称：</span>
        <!-- <span>深圳交易集团有限公司</span> -->
        <span>{{receiver.virtualName}}</span>
      </div>
      <div>
        <span class="title">支付金额：</span>
        <span style="color: #E03437;">{{ '¥' + currentRow.subAmount }}</span>
      </div>
      <div>
        <span class="title">支付方式：</span>
        <a-radio-group>
        <span>
          <a-radio>钱包支付</a-radio>
        </span>
        <span>余额{{noBalance?'':'不足'}}：￥{{balance}}</span>
        </a-radio-group>
      </div>
    </div>
  </a-modal>
</template>

<script>

import storage from '@/utils/storage'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    submitLoading: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '支付信息'
    },
    currentRow: {
      type: Object,
      default: () => ({})
    },
    receiver: {
      type: Object,
      default: () => ({})
    },
    balance:{
      type:Number|String,
      default:0
    }
  },
  computed: {
    noBalance () {
      let money = +this.currentRow.subAmount || 0
      return money <= this.balance && this.balance > 0
    },
    // balance () {
    //   let wallet = storage.session.get('wallet')
    //   return wallet ? wallet.balance : 0
    // }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    },
    submitForm () {
      if (this.noBalance) this.$emit('ok')
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-bottom: 10px;
}
</style>
